<!-- 首页 -->
<template>
	<!-- 整体 -->
	<scroll-view class="content">
		<!-- 顶部广告图区域开始 -->
		<view class="top-box">
			<!-- 微信顶部搜索框外的盒子 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="top-wxSearch-box">
				<!-- 地区选择 -->
				<text class="top-Search-tex">南昌 </text>
				<text style="color: gray;">|</text>
				<input class="top-Search" type="text" placeholder="景点/目的地/主题" />
				<!-- 微信搜索框 -->
				<image class="top-Search-img"
					src="https://ts1.tc.mm.bing.net/th/id/R-C.bf5e6bcabaaa8143e41ce10c63d5bd79?rik=fEgSv7W2WL%2bhbg&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2fallimg%2f170119%2f1-1F1191335510-L.png&ehk=UGOqdbbRrVRodnBwCyG7i7dgq3%2b2pmT6OpqYL3u%2bjBA%3d&risl=&pid=ImgRaw&r=0"
					mode="aspectFill"></image>
			</view>
			<!-- #endif -->
			<!-- H5顶部搜索框外的盒子 -->
			<!-- #ifdef H5 -->
			<view class="top-h5Search-box">
				<!-- 地区选择 -->
				<text class="top-Search-tex">南昌 </text>
				<text style="color: gray;">|</text>
				<!-- h5搜索框 -->
				<input class="top-Search" type="text" placeholder="景点/目的地/主题" />
				<image class="top-Search-img"
					src="https://ts1.tc.mm.bing.net/th/id/R-C.bf5e6bcabaaa8143e41ce10c63d5bd79?rik=fEgSv7W2WL%2bhbg&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2fallimg%2f170119%2f1-1F1191335510-L.png&ehk=UGOqdbbRrVRodnBwCyG7i7dgq3%2b2pmT6OpqYL3u%2bjBA%3d&risl=&pid=ImgRaw&r=0"
					mode="aspectFill"></image>
			</view>
			<!-- #endif -->
			<!-- 顶部广告图 -->
			<image class="top-box-img"
				src="https://tse4-mm.cn.bing.net/th/id/OIP-C._rFlDy9yUlpVYVdGGbKNCwAAAA?r=0&rs=1&pid=ImgDetMain"
				mode="aspectFill"></image>
		</view>
		<!-- 顶部广告图区域结束 -->
		<!-- 中间导航部分开始 -->
		<view class="nav-box">
			<view class="grid-row">
				<view class="grid-item" v-for="(item, index) in firstRowItems" :key="index">
					<image class="icon" :src="item.icon" mode="aspectFit"></image>
					<text class="label">{{item.label}}</text>
				</view>
			</view>

			<!-- 第二行 -->
			<view class="grid-row">
				<view class="grid-item" v-for="(item, index) in secondRowItems" :key="index">
					<image class="icon" :src="item.icon" mode="aspectFit"></image>
					<text class="label">{{item.label}}</text>
				</view>
			</view>
		</view>
		<!-- 中间导航部分结束 -->
		<!-- 中间广告图开始 -->
		<image class="advert-img"
			src="https://tse1-mm.cn.bing.net/th/id/OIP-C.HSzc-Iz5qZ7LMxW4SH2jVgHaEO?w=272&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3"
			mode="scaleToFill"></image>
		<!-- 中间广告图结束 -->
		<!-- 限时特惠开始 -->
		<view class="Preference">
			<!-- 左边部分 -->
			<view class="Preference-left">
				<!-- 左边文字部分 -->
				<view class="Preference-texbox">
					<text style="color: #fff; font-weight: bold;font-style: italic;">限时特惠</text>
					<image src="/static/image/clock.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
				</view>
				<!-- 左边图片部分 -->
				<view class="Preference-img">
					<image
						src="https://tse2-mm.cn.bing.net/th/id/OIP-C.kNmY_oqFE6ZjwiZbtEeqmwHaDt?w=350&h=175&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3"
						mode="aspectFill"
						style="width: 100%;height: 230rpx;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
					</image>
					<!-- 左边图片下的文字 -->
					<view class="Preference-img-texbox">
						<view style="padding-left: 10rpx;">
							<text style="font-size: 15px;font-weight: bold;">瑞金帆船出海体验</text>
						</view>
						<view style="padding-left: 10rpx;">
							<text style="color: red; font-size: 15px;"> ￥79.00</text>
							<text style="color: gray;font-size: 12px;">起</text>
							<text style="text-decoration: line-through;color: gray;font-size: 12px;">￥108.00</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 右边部分 -->
			<view class="Preference-right">
				<!-- 右边文字部分 -->
				<view class="Preference-texbox">
					<text style="color: #fff;font-weight: bold;font-style: italic;">心动.拼团</text>
				</view>
				<!-- 右边图片部分 -->
				<view class="Preference-img">
					<image
						src="https://tse4-mm.cn.bing.net/th/id/OIP-C.TFPhvacQf0-jumb_ondeqwHaEz?w=236&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3"
						mode="aspectFill"
						style="width: 100%;height: 230rpx;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
					</image>
					<!-- 右边图片下的文字 -->
					<view class="Preference-img-texbox">
						<view style="padding-left: 10rpx;">
							<text style="font-size: 15px;font-weight: bold;">金夏环鼓游</text>
						</view>
						<view style="padding-left: 10rpx;">
							<text style="color: red;font-size: 15px;"> ￥50.00</text>
							<text style="color: gray;font-size: 12px;">起</text>
							<text style="text-decoration: line-through;color: gray;font-size: 12px;">￥80.00</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 限时特惠结束 -->
		<!-- 游玩人气指数部分开始 -->
		<view class="Popularity">
			<!-- 游玩人气游玩人气文字部分 -->
			<view class="Popularity-tex">
				<text style="font-size: 15px;font-weight: bold;padding-left: 10rpx;">游玩人气指数 <text style="color: red;">TOP</text></text>
				<text style="font-size: 12px;color:gray;padding-right: 10rpx;">更多</text>
				</view>
			<!-- 游玩人气图片部分 -->
			<scroll-view class="Popularity-imgbox" scroll-x="true" :show-scrollbar="false" >
				<view style="display: inline-block;" v-for="(item,index) in Popularitys" :key="index">
					<view class="Popularity-imgview">
						<!-- 游玩人气图片部分的角标 -->
						<text class="Popularity-img-Superscript">{{item.id}}</text>
						<!-- 游玩人气图片 -->
						<image :src="item.src" mode="aspectFill" class="Popularity-img"></image>
						<view style="padding-left: 10rpx;">
							<text style="font-size: 15px;font-weight: bold;">{{item.name}}</text>
						</view>
						<view style="padding-left: 10rpx;">
							<text style="color: red;font-size: 13px;">{{item.price}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 游玩人气指数部分结束 -->
		<!-- 精选游玩部分开始 -->
		<view class="choicegame">
			<!-- 精选游玩标题 -->
			<view class="Popularity-tex">
				<text style="font-size: 15px;font-weight: bold;padding-left: 10rpx;">精选游玩</text>
				<text style="font-size: 12px;color:gray;padding-right: 10rpx;">更多</text>
				</view>
				<!-- 精选游玩 -->
				<view v-for="(item,index) in choicegamenum" :key="item.id">
				<view class="choicegame-box">
					<!-- 精选游玩图片 -->
					<image :src="item.src" mode="aspectFill" style="width: 170rpx;height: 170rpx;border-radius: 20rpx;margin-right: 20rpx;"></image>
					<!-- 精选游玩文字盒子 -->
					<view class="choicegame-texbox">
						<!-- 精选游玩名字 -->
						<text style="font-size: 13px;">{{item.name}}</text>
						<!-- 精选游玩简介 -->
						<text  style="overflow: hidden;text-overflow: ellipsis; width: 100%;white-space: nowrap;font-size: 13px;color: gray;">{{item.introduce}}</text>
						<!-- 精选游玩文字 -->
						<text><text class="choicegame-tex" >{{item.time}}</text> 
						<text class="choicegame-tex">{{item.tex1}}</text>
						<text class="choicegame-tex">{{item.tex2}}</text>
						</text>
						<!-- 精选游玩地址和价格的盒子 -->
						<view class="choicegame-address">
							<view ><image src="/static/image/address.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image><text style="font-size:13px;">{{item.address}} </text> </view>
							<text style="color: red;">{{item.price}}</text>
						</view>
					</view>
				</view>
				</view>
		</view>
	<!-- 精选游玩部分结束	 -->
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				// 中间导航部分数据
				firstRowItems: [{
						id: '01',
						label: '游玩带货',
						icon: '/static/image/icon1.png',
						path: ''
					},
					{
						id: '02',
						label: '精选配套',
						icon: '/static/image/icon2.png',
						path: ''
					},
					{
						id: '03',
						label: '游玩攻略',
						icon: '/static/image/icon3.png',
						path: ''
					},
					{
						id: '04',
						label: '专属管家',
						icon: '/static/image/icon4.png',
						path: ''
					}
				],
				// 中间导航部分数据
				secondRowItems: [{
						id: '05',
						label: '水上项目',
						icon: '/static/image/icon5.png',
						path: ''
					},
					{
						id: '06',
						label: '景点门票',
						icon: '/static/image/icon6.png',
						path: ''
					},
					{
						id: '07',
						label: '国庆主题',
						icon: '/static/image/icon7.png',
						path: ''
					},
					{
						id: '08',
						label: '特产主题',
						icon: '/static/image/icon8.png',
						path: ''
					}
				],
				// 游玩人气指数部分
				Popularitys:[{
					id:'1',
					src:'https://tse4-mm.cn.bing.net/th/id/OIP-C.xG2-nSw40TxRXm2lXYelqwHaDw?w=285&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3',
					name:'广西桂林漓江',
					price:'￥99.00',
					path:''
				},{
					id:'2',
					src:'https://pic.kuaizhan.com/g3/0a/bf/9982-ad96-4e1f-88f9-bf530e5443ea79',
					name:'海南',
					price:'￥72.00',
					path:''
				},{
					id:'3',
					src:'https://tse4-mm.cn.bing.net/th/id/OIP-C.x3rC4AYWcEFfSGuyjljP0QHaFj?w=237&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3',
					name:'杭州西湖',
					price:'￥66.00',
					path:''
				},{
					id:'4',
					src:'https://tse3-mm.cn.bing.net/th/id/OIP-C.4uha6cPtIEgZMFmmZmYtWAHaE7?w=240&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3',
					name:'江西九江庐山',
					price:'￥108.00',
					path:''
				},{
					id:'5',
					src:'https://tse1-mm.cn.bing.net/th/id/OIP-C.az-N7BdKjUtJyS6AB4LW2QAAAA?w=256&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3',
					name:'江西萍乡武功山',
					price:'￥99.00',
					path:''
				}],
				// 精选游玩部分的数据
				choicegamenum:[{
					id:'1',
					src:'https://www.hanpokou.com/wp-content/uploads/2021/11/df62eb6a42a5e328ca94592a4b3a1fb8.jpg',//图片地址
					name:'滕王阁',//游玩名称
					introduce:'滕王阁与黄鹤楼、岳阳楼并称为“江南三大名楼”，因王勃的《滕王阁序》而古今闻名。这里历史悠久，始建于唐朝，文化底蕴深厚，曾经吸引众多文人墨客，并在此留下了千古绝唱。',//游玩介绍
					time:'1小时',//游玩时间
					tex1:'景点',//类型1
					tex2:'建筑',//类型2
					address:'江西南昌滕王阁',//地址
					price:'￥60.00',//价格
					path:''//跳转页面
				},{
					id:'2',
					src:'https://www.hanpokou.com/wp-content/uploads/2021/11/cb1448f476ef6d2fa254d1452f99f28c.jpg',//图片地址
					name:'秋水广场',//游玩名称
					introduce:'秋水广场与滕王阁隔江相望，这里风光迷人，充满了文化气息。这里有世界第二大音乐喷泉，景观壮丽，让人叹为观止。',//游玩介绍
					time:'1.5小时',//游玩时间
					tex1:'景点',//类型1
					tex2:'喷泉',//类型2
					address:'江西南昌秋水广场',//地址
					price:'免费',//价格
					path:''//跳转页面
				},{
					id:'3',
					src:'https://www.hanpokou.com/wp-content/uploads/2021/11/faaae6ade8c52cf041060c3a6e7b42fc.jpg',//图片地址
					name:'安义古村',//游玩名称
					introduce:'安义古村是南昌的古镇，是典型的的赣派建筑，风格独具，十分具有韵味。这里环境古朴，静谧且安详，展现了一幅岁月静好的画面。想要了解南昌风情，感受赣派气息，那么安义古村千万不要错过。',//游玩介绍
					time:'1小时',//游玩时间
					tex1:'景点',//类型1
					tex2:'建筑',//类型2
					address:'江西南昌安义古村',//地址
					price:'￥20.00',//价格
					path:''//跳转页面
				},{
					id:'4',
					src:'https://www.hanpokou.com/wp-content/uploads/2021/11/4dc0b31308549448c48154278ae4b835.jpg',//图片地址
					name:'西山万寿宫',//游玩名称
					introduce:'万寿宫是一个道观，已有几百年历史，也是古代江西商会的所在地。这里宗教气息浓郁，建筑风格美观大方，雕刻精良，装修富丽堂皇，别是一番风味。',//游玩介绍
					time:'2小时',//游玩时间
					tex1:'景点',//类型1
					tex2:'建筑',//类型2
					address:'江西南昌西山万寿宫',//地址
					price:'免费',//价格
					path:''//跳转页面
				},{
					id:'5',
					src:'https://www.hanpokou.com/wp-content/uploads/2021/11/e0327eaa17b6d0b5d4fd9ed15410a140.jpg',//图片地址
					name:'百花洲',//游玩名称
					introduce:'百花洲自然景色旖旎，风光无限，让人赏心悦目，心旷神怡。这里不仅展现了历史的记忆，还富有现代化的气息和活力，体现了这座城市独特的魅力。',//游玩介绍
					time:'2小时',//游玩时间
					tex1:'景点',//类型1
					tex2:'荷塘',//类型2
					address:'江西南昌百花洲',//地址
					price:'￥88.00',//价格
					path:''//跳转页面
				}]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	.content {
		background-color: #eeeef0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 顶部广告图开始 */
	.top-box {
		display: flex;
		width: 100%;
		height: 500rpx;
		position: relative;
	}

	/* 微信顶部搜索框外的盒子 */
	.top-wxSearch-box {
		display: flex;
		width: 60%;
		height: 60rpx;
		margin-left: 20rpx;
		background-color: white;
		position: absolute;
		line-height: 60rpx;
		top: 20%;
		border-radius: 25rpx;
		z-index: 1;
	}

	/* h5顶部搜索框外的盒子 */
	.top-h5Search-box {
		display: flex;
		width: 60%;
		height: 70rpx;
		margin-left: -30%;
		background-color: white;
		position: absolute;
		line-height: 70rpx;
		padding: 0 20rpx;
		top: 10%;
		left: 50%;
		border-radius: 35rpx;
		z-index: 1;
	}

	.top-Search-tex {
		width: 15%;
		font-size: 25rpx;
		padding-left: 20rpx;
	}

	.top-Search {
		width: auto;
		height: 100%;
		padding-left: 20rpx;
		font-size: 25rpx;
	}

	.top-Search-img {
		width: 50rpx;
		height: 50rpx;
		margin: auto;
	}

	/* 顶部广告图 */
	.top-box-img {
		width: 100%;
		height: 100%;
	}

	/* 顶部广告图结束 */
	/* 中间导航部分开始 */
	.nav-box {
		width: 90%;
		padding: 30rpx 10rpx;
		margin-top: -50rpx;
		margin-bottom: 20rpx;
		position: relative;
		margin-left: 5%;
		border-radius: 20rpx;
		background-color: white;
	}

	.grid-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 23%;
	}

	.icon {
		width: 40px;
		height: 40px;
		margin-bottom: 8px;
		border-radius: 50%;
	}

	.label {
		font-size: 12px;
		color: #333;
		text-align: center;
	}

	/* 中间导航部分结束 */
	/* 中间广告图开始 */
	.advert-img {
		display: block;
		width: 90%;
		height: 200rpx;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	/* 中间广告图结束 */
	/* 限时特惠开始 */
	.Preference {
		display: flex;
		width: 90%;
		height: 430rpx;
		margin: 10rpx auto;
		justify-content: space-between;
	}

	/* 左右部分的文字盒子样式 */
	.Preference-texbox {
		display: flex;
		width: 90%;
		height: 40rpx;
		margin: 10rpx auto;
		line-height: 40rpx;
	}

	/* 左右部分图片部分样式 */
	.Preference-img {
		position: relative;
		width: 90%;
		height: 320rpx;
		margin: 10rpx auto;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.Preference-img-texbox {
		width: 100%;
		height: 90rpx;
	}

	/* 左边部分 */
	.Preference-left {
		width: 48%;
		height: 90%;
		margin: auto;
		border-radius: 20rpx;
		background-color: #409efc;
	}

	/* 右边部分 */
	.Preference-right {
		width: 48%;
		height: 90%;
		margin: auto;
		border-radius: 20rpx;
		background-color: #fe584f;
	}

	/* 限时特惠结束 */
	/* 游玩人气指数部分开始 */
	.Popularity{
		width: 90%;
		height: 350rpx;
		margin: 10rpx auto;
		border-radius: 20rpx;
		background-color: #fff;
	}
	/* 游玩人气文字部分 */
	.Popularity-tex{
		display: flex;
		width: 100%;
		height: 50rpx;
		justify-content: space-between;
		margin: 10rpx auto;
		line-height: 50rpx;
	}
	/* 游玩人气图片部分 */
	.Popularity-imgbox{
		display:inline-block;
		white-space: nowrap;
		height: 260rpx;
		margin: 10rpx auto;
	}
	.Popularity-imgview{
		display: flex;
		flex-direction: column;
		width: 230rpx;
		height: 260rpx;
		margin: 0   10rpx;
		position: relative;
	}
	/* 游玩人气图片角标 */
	.Popularity-img-Superscript{
		color: #fff;
		width: 50rpx;
		height: 39rpx;
		border-top-left-radius:20rpx ;
		border-bottom-right-radius: 20rpx;
		text-align: center;
		background-color: red;
		position: absolute;
		top: 0;
	}
	/* 游玩人气图片 */
	.Popularity-img{
		width: 100%;
		height: 230rpx;
		border-radius: 20rpx;
	}
	/* 游玩人气指数部分结束 */
	/* 精选游玩开始 */
	.choicegame{
		padding: 5rpx;
		display: flex;
		flex-direction: column;
		width: 90%;
		height: 1100rpx;
		margin: 10rpx auto;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.choicegame-box{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 100%;
		height: 170rpx;
		margin: 20rpx auto;
	}
	.choicegame-texbox{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 70%;
		margin-right: 10rpx;
		height: 100%;
	}
	.choicegame-tex{
		margin:0 5rpx;
		width: 50rpx;
		padding: 2rpx;
		border-width:1px;
		border-color: #1684fc;
		border-style:solid;
		font-size: 12px;
	}
	.choicegame-address{
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
	}
	/* 精选游玩结束 */
	
</style>